<template>
  <div class="active">
    <el-form :model="formdata">
      <el-form-item>
        <el-input v-model="formdata.test" placeholder='输入角色名称'></el-input>
      </el-form-item>
      <el-button class="chande" @click="search">搜索</el-button>
      <el-button @click="replacement">重置</el-button>
        <el-button
          class="el-icon-plus"
          @click="imeit"
          >添加成员</el-button
        >
    </el-form>
        <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        type="index"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名">
      </el-table-column>
       <el-table-column
        prop="createTime"
        label="添加时间">
      </el-table-column>
      <el-table-column
        prop="status"
        label="是否启用">
        <template v-slot="{row}">
            <el-switch
         v-model="row.status"
         active-color="#ff7144"
         @change="using(row)"
        >
       </el-switch>
        </template>
      </el-table-column>
       <el-table-column
        prop="address"
        width="180"
        label="操作">
        <template v-slot='{row}'>
          <el-button type="text" size="small" @click="menusts(row)">分配角色</el-button>
          <el-button type="text" size="small" @click="menthus(row)">编辑</el-button>
          <el-button type="text" size="small" @click="xlxremove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
      <!-- 分页 -->
    <el-pagination
        class="lyx"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="q.index"
        :page-size="5"
        layout="prev, pager, next, jumper"
      >
      </el-pagination>
    <!-- 新增成员组件 -->
     <el-dialog 
     :title="isedite ? '编辑店铺': '添加店铺'"
      :destroy-on-close='true' 
  :close-on-click-modal='false' 
     :visible.sync="dialogTableVisible"
     v-if="dialogTableVisible">
   <Newmember @clone="cloned" :isedite="isedite" :childata='childata'></Newmember>
     </el-dialog>
    <!-- 分配角色组件 -->
    <el-dialog title="分配角色"
      :destroy-on-close='true' 
  :close-on-click-modal='false' 
     :visible.sync="dialogFormVisible">
     <Chaert @close="dialogFormVisible = false" :childata='childata'></Chaert>
     </el-dialog>
  </div>
</template>

<script>
import { member,forbidden,initiated,remove } from '@/api/limits'
import Chaert from './components/chaert.vue'
import Newmember from './components/newmember.vue'
export default {
   components: {Chaert,Newmember},
      data() {
        return {
          isedite:false,
          dialogTableVisible:false,
          dialogFormVisible:false,
          tableData: [],
          childata:{},
          q:{
            index:1,
            size:10,
            userTitle:''
          },
          formdata:{
            test:''
          }
        }
      },
      created(){
        this.loacdinteh()
      },
      methods:{
       async loacdinteh(){
         const res = await member(this.q)
        //  console.log(res.data);
         this.tableData = res.data.data
        },
        // 分配角色
        menusts(row){
          this.dialogFormVisible = true
           this.childata = row
        },
        // 新增成员
        imeit(){
          this.dialogTableVisible = true  
          this.isedite = false    
          },
          // 编辑成员
          menthus(row){
            this.dialogTableVisible = true  
          this.isedite = true 
         this.childata = row
          },
          // 确定取消
          cloned(){
           this.dialogTableVisible = false
           this.loacdinteh()
          },
          // 是否启用禁用
     async using(row){
        if(row.status == false){
          const params = new URLSearchParams();
        params.append("userId",row.id); //
        const red = await forbidden(params);
       this.$message.success(red.msg)
        this.loacdinteh()
        }  else{
           const param = new URLSearchParams();
        param.append("userId",row.id); //
        const rev = await initiated(param);
        this.$message.success(rev.msg)
        this.loacdinteh()
        }
      },
      // 删除
      xlxremove(row){
         this.$confirm("您确认删除吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
          const params = new URLSearchParams(); // 创建URLSearchParams数据对象
          params.append("userId", row.id); //
          const res = await remove(params);
           this.loacdinteh()
          if (res.code !== 200) return this.$message.error(res.msg);
          this.$message.success(res.msg);
        })
      },
      // 搜索
      search(){
       this.q.userTitle = this.formdata.test
        this.loacdinteh()
      },
      // 重置
      replacement(){
        this.q.index = 1
        this.q.userTitle = ''
        this.formdata.test = ''
        this.loacdinteh()
      },
      // 分页
    handleCurrentChange(index) {
      this.q.index = index;
      this.loacdinteh();
    },
    handleSizeChange(size) {
      this.q.size = size;
      this.loacdinteh();
    },
      }
    }
</script>

<style scoped>
.active{
  background-color: #fff;
  padding: 30px 20px;
}
 .el-form-item{
  width: 15% !important;
  display: inline-block;
margin-right: 20px;

}

.chande{
  display: inline-block;
  background-color: #ff7144;
  color: #fff;
  border: 1px solid #ff7144;
}
.el-icon-plus {
  color: #ff7144;
  position: absolute;
  right: 5%;
  border: 1px solid #ff7144;
}
::v-deep .el-dialog{
  width: 500px !important;
}
::v-deep .el-dialog__body{
  padding: 30px 20px 30px 0;
}
</style>